<template>
	<map class="map" id="map" :show-location="true" :longitude="longitude" :latitude="latitude" :markers="markers"></map>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})
	onMounted(() => {
		uni.getFuzzyLocation({
			type: 'wgs84',
			success: function (res) {
				latitude.value = res.latitude
				longitude.value = res.longitude
			}
		});
	})
	const latitude = ref(0)
	const longitude = ref(0)
	const markers = [{
		id: 1,
		latitude: props.data?.driver_info?.lat,
		longitude: props.data?.driver_info?.lng,
		iconPath: '/static/image/address1.png',
		width: '52rpx',
		height: '52rpx'
		
	}, {
		id: 2,
		latitude: props.data.start_latitude,
		longitude: props.data.start_longitude,
		iconPath: '/static/image/address2.png',
		width: '37rpx',
		height: '57rpx'
	}, {
		id: 3,
		latitude: props.data.recipient_latitude,
		longitude: props.data.recipient_longitude,
		iconPath: '/static/image/address3.png',
		width: '37rpx',
		height: '57rpx'
	}]
</script>

<style lang="scss" scoped>
	.map {
		height: 366rpx;
		width: 100%;
	}
</style>